<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
    <head>
        <title>c:if</title>
        <style type="text/css">
            p { border: 1px solid blue ; text-align: center ; }
            .tab { width: 100% ; border-collapse: collapse ; }
            .tab tr.title { background: #6495ed ; }
            .tab tr.odd { background: #d0d0d0; }
            .tab tr.even { background: #ffe59c; }
        </style>
    </head>
    <body>

        <h3>c:if</h3>

        <c:set var="first" value="<%= (int)( Math.random() * 100 ) %>" scope="page" />
        <c:set var="second" value="<%= (int)( Math.random() * 100 ) %>" scope="page" />

        <%-- 当 test 对应的表达式或取值为 true 时才执行 if 标签体中的内容 --%>
        <c:if test="${ first > second }">
            <p> ${ first } 大于 ${ second }</p>
        </c:if>
        <%-- 标准标签库中没有 elseif 、else 等标签  --%>
        <c:if test="${ first == second }">
            <p> ${ first } 等于 ${ second }</p>
        </c:if>

        <c:if test="${ first < second }">
            <p> ${ first } 小于 ${ second }</p>
        </c:if>

        <hr>

        <%-- choose 标签直接子标签只能使用 when 和 otherwise --%>
        <c:choose>
            <%-- when 标签的 test 属性与 if 标签的 test 属性作用相同 --%>
            <c:when test="${ first > second }">
                <p> ${ first } 大于 ${ second }</p>
            </c:when>
            <c:when test="${ first < second }">
                <p> ${ first } 小于 ${ second }</p>
            </c:when>
            <c:otherwise>
                <p> ${ first } 等于 ${ second }</p>
            </c:otherwise>
        </c:choose>

        <hr>

        <h4>隔行变色的表格</h4>
        <table class="tab">
            <%
                for( int i = 0 ; i <= 10 ; i++ ) {
                    // 若期望后续可以通过 EL 获取 i 变量的值则需要将其设置到 pageContext 属性中
                    pageContext.setAttribute( "i" , i );
            %>
            <c:choose>
                <c:when test="${ i != 0 && i % 2 == 0 }">
                    <tr class="even">
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                    </tr>
                </c:when>
                <c:when test="${ i % 2 == 1 }">
                    <tr class="odd">
                        <td>11</td>
                        <td>11</td>
                        <td>11</td>
                    </tr>
                </c:when>
                <c:otherwise>
                    <tr class="title">
                        <th>11</th>
                        <th>11</th>
                        <th>11</th>
                    </tr>
                </c:otherwise>
            </c:choose>


            <% } %>
        </table>

    </body>
</html>
